<!--
 * @Description  : 文本溢出tooltip 否则隐藏tooltip
 * @Autor        : 杜康
 * @Date         : 2023-05-12 16:21:36 +0800
 * @LastEditors  : 杜康
 * @LastEditTime : 2023-05-12 17:54:13 +0800
-->
<template>
  <el-tooltip
    v-bind="$attrs"
    :disabled="showTooltip"
    :placement="placement"
    :content="content"
    popper-class="my-tip"
    :style="cssVars"
  >
    <div
      :class="lineNumber > 1 ? 'text-ellipsis-multiple' : ''"
      @mouseenter.stop="onMouseEnter"
      v-text="content"
    ></div>
  </el-tooltip>
</template>

<script>
export default {
  name: "TextTooltip",
  props: {
    // 显示内容
    content: {
      type: String,
      default: "",
    },
    placement: {
      type: String,
      default: "top",
    },
    // 要显示的行数
    lineNumber: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      showTooltip: false,
    };
  },
  computed: {
    cssVars() {
      return {
        "--lineNumber": this.lineNumber,
      };
    },
  },
  methods: {
    /**
     * @description: 鼠标进入事件
     * @param {*} event
     * @return {*}
     * @author: 杜康
     * @Date: 2023-05-12 17:55:20 +0800
     */
    onMouseEnter(event) {
      const dom = event.target;
      // console.log(dom.offsetHeight, dom.scrollHeight);
      // 单行会比较 dom.offsetWidth < dom.scrollWidth
      // 多行会比较 dom.offsetHeight < dom.scrollHeight
      this.showTooltip = !(
        dom.offsetWidth < dom.scrollWidth || dom.offsetHeight < dom.scrollHeight
      );
    },
  },
};
</script>

<style lang="scss" scoped>
//多行文本文字超过行数限制后显示省略号
// caniuse兼容性（不支持IE）：https://caniuse.com/?search=-webkit-line-clamp
.text-ellipsis-multiple {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-line-clamp: var(--lineNumber);
  line-clamp: var(--lineNumber);
}
</style>

<style lang="scss">
.my-tip {
  max-width: 25% !important;
}
</style>
